<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="杨宁争">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        nav {
            width: 100%;
            height: 60px;
            background-color: lavender;
            line-height: 60px;
        }

        .container {
            margin: 0 auto;
            width: 1000px;
            background-color: #aaa;
            height: 60px;
          padding-left: 90px;
        }

        .nav-left {
            display: flex;
            justify-content: space-around;
        }

        .nav-left li a {
            text-decoration: none;
            font-size: 20px;
            color: whitesmoke;
        }
        .biaoti{
            position: relative;
            width: 200px;

        }

        .inner {
            width: 120px;
            height: 200px;
            background-color: whitesmoke;
            border: 1px solid lightgray;
            left: -20px;
            top: 60px;

            position: absolute;
            display: none;
        }

        .inner li a {
            color: lightblue;
            position: relative;
            left: 20px;
        }
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <div class="tuer">
                <ul class="nav-left">
                    <li class="biaoti"><a href="">公司简介</a>
                        <ul class="inner">
                            <li><a href="">概况介绍</a></li>
                            <li><a href="">发展历史</a></li>
                            <li><a href="">公司实力</a></li>
                        </ul>

                    </li>
                    <li class="biaoti"><a href="">产品介绍</a>
                        <ul class="inner">
                            <li><a href="">软件研发</a></li>
                            <li><a href="">软件教育</a></li>
                            <li><a href="">天使投资</a></li>
                        </ul>
                    </li>
                    <li class="biaoti"><a href="">联系我们</a>
                        <ul class="inner">
                            <li><a href="">公司地址</a></li>
                            <li><a href="">联系方式</a></li>
                            <li><a href="">投资加盟</a></li>
                        </ul>
                    </li>
                    <li class="biaoti"><a href="">人才招聘</a>

                        <ul class="inner">
                            <li><a href="">Java招聘</a></li>
                            <li><a href="">Html5招聘</a></li>
                            <li><a href="">PHP招聘</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="./jquery.js">
    </script>
</body>

</html>

<script>
    $('.biaoti').mouseover(function () {

        $(this).children('a').css('color', 'orange');
        // console.log($(this).index());
        $('.inner').eq($(this).index()).css('display', 'block');

    

    });
        $('.inner>li').mouseover(function () {
            $(this).css('text-decoration', 'underline');
        });
        $('.inner>li').mouseout(function () {
            $(this).css('text-decoration', 'none');
        });
        $('.biaoti').mouseout(function () {
            // console.log('object');
            $(this).children('a').css('color', 'white');
            $('.inner').eq($(this).index()).css('display', 'none');


        });
</script>